<template>
  <div class="protocol-list">
    <div class="msg-top-text">协议列表</div>
    <el-input style="width:200px; margin-left:20px; margin-top:1em;" placeholder="服务名称/协议名称" />
    <el-button class="filter-item" style="margin-left:10px; margin-right:5px" type="primary" icon="el-icon-search">搜索</el-button>
    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="dialogVisible = true">添加协议</el-button>
    <el-dialog
      title="请选择协议"
      :visible.sync="dialogVisible"
      width="30%"
      :append-to-body="true"
    >
      <div class="center">
        <router-link :to="'/protocol/gpio'">
          <el-button type="primary">GPIO</el-button>
        </router-link>
        <router-link :to="'/protocol/uart'">
          <el-button type="primary" style="margin-left:10px">UART</el-button>
        </router-link>
        <router-link :to="'/protocol/i2c'">
          <el-button type="primary" style="margin-left:10px">I2C</el-button>
        </router-link>
        <router-link :to="'/protocol/spi'">
          <el-button type="primary" style="margin-left:10px">SPI</el-button>
        </router-link>
        <router-link :to="'/protocol/can'">
          <el-button type="primary" style="margin-left:10px">CAN</el-button>
        </router-link>
      </div>
    </el-dialog>
    <div class="list" style="width:80em; height:45em; overflow:scroll; overflow-x:hidden;">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr class="list-head">
          <td class="list-head-text">ID</td>
          <td class="list-head-text">服务名称</td>
          <td class="list-head-text">协议编号</td>
          <td class="list-head-text">协议名称</td>
          <td class="list-head-text">服务地址</td>
          <td class="list-head-text">运行状态</td>
          <td class="list-head-text">操作</td>
        </tr>
        <tr v-for="(item,index) in ProtocolList" :key="index" class="list-item">
          <td class="list-item-text">{{ item.id }}</td>
          <td class="list-item-text">{{ item.ServiceName }}</td>
          <td class="list-item-text">{{ item.ProtocolNum }}</td>
          <td class="list-item-text">{{ item.ProtocolName }}</td>
          <td class="list-item-text">{{ item.ServiceAddress }}</td>
          <td class="list-item-text">
            <div v-if="item.status=='True'" class="on">在线</div>
            <div v-else-if="item.status=='False'" class="off">离线</div></td>
          <td class="center">
            <router-link :to="`/protocol/rate?id=${item.id}`">
              <el-button class="center" type="primary" size="mini">查看</el-button>
            </router-link>
            <el-button class="center" style="margin-left:5px" type="primary" size="mini" @click="change(item.id,item.ProtocolName)">修改</el-button>
            <el-button v-if="item.status=='False'" class="center" style="margin-left:5px" type="success" size="mini" @click="start(item.id)">启动</el-button>
            <el-button v-if="item.status=='True'" class="center" style="margin-left:5px" type="danger" size="mini" @click="stop(item.id)">停止</el-button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { ShowList } from '@/api/protocol'
import axios from 'axios'
export default {
  name: 'Index',
  data() {
    return {
      id: undefined,
      dialogVisible: false,
      ProtocolName: '',
      ProtocolList: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      await ShowList().then((res) => {
        console.log(res)
        this.ProtocolList = res.data
      })
    },
    start(serviceid) {
      this.id = serviceid
      axios({
        method: 'get',
        url: `http://192.168.10.152:5002/protocol/start/${this.id}`
      })
        .then((res) => {
          this.getList()
          console.log(res)
        })
    },
    stop(serviceid) {
      this.id = serviceid
      axios({
        method: 'get',
        url: `http://192.168.10.152:5002/protocol/stop/${this.id}`
      })
        .then((res) => {
          this.getList()
          console.log(res)
        })
    },
    change(serviceid, name) {
      this.id = serviceid
      this.ProtocolName = name
      if (this.ProtocolName === 'GPIO') {
        this.$router.push(`/protocol/change_gpio?id=${this.id}`)
      } else if (this.ProtocolName === 'UART') {
        this.$router.push(`/protocol/change_uart?id=${this.id}`)
      } else if (this.ProtocolName === 'I2C') {
        this.$router.push(`/protocol/change_i2c?id=${this.id}`)
      } else if (this.ProtocolName === 'SPI') {
        this.$router.push(`/protocol/change_spi?id=${this.id}`)
      } else if (this.ProtocolName === 'CAN') {
        this.$router.push(`/protocol/change_can?id=${this.id}`)
      }
    }
  }
}
</script>

<style scoped>
.protocol-list{
  margin:10px 15px 15px 20px;
  width: 88em;
  height: 52em;
  background:white;
  border-radius:1.5em;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin:0.8em 0 0 0;
}
.list{
  margin: 1em 1em 1em 1em;
  width: 88em;
}
.msg-top-text{
  font-size: 1.2em;
  color: #4D4F5C;
  border-bottom:0.08em solid dimgray;
  font-weight: 700;
  height: 2.5em;
  margin: 0 0.93em 0 0.93em;
  padding: 0.8em 0 0.5em 0;
}
.list-head {
  background: #F5F6FA;
  color: #A3A6B4;
}
.list-head-text {
  font-size: 0.88em;
  height: 3.04em;
  width: 20em;
  font-weight: bold;
  text-align: center;
  vertical-align: center;
}
.list-item {
  background: white;
  height:4.2em;
  color: #4D4F5C;
}

.list-item:hover {
  background: #F5F6FA;
}

.list-item-text {
  height: 3.04em;
  width: 9.32em;
  font-size: 1em;
  text-align: center;
  vertical-align: middle;
}

.on{
  color: green;
  font-size: 1rem;
  vertical-align: center;
  margin: 0.5rem 0 0.5rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.off{
  color: red;
  font-size: 1rem;
  vertical-align: center;
  margin: 0.5rem 0 0.5rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
